<script setup>

import Header from "./components/Header.vue";
import Navigator from "./components/Navigator.vue";
import Content from "./components/Content.vue";
import {ref} from "vue";

let message = ref()
//定义一个函数，从子组件中获取数据
function receiver(data){
  message.value=data
}
</script>

<template>
<!--使用其他页面中的组件-->
  <Header class="header"></Header>
  <Navigator @sendMenu="receiver"  class="navigator"></Navigator>
  <Content class="content" :message="message"></Content>
</template>

<style scoped>
  .header{
    width: 100%;
    height: 120px;
    border: 1px solid red;
  }
  .navigator{
    width: 300px;
    height: 500px;
    border: 1px solid blue;
    float: left;
  }
  .content{
    width: 900px;
    height: 500px;
    border: 1px solid yellowgreen;
    float: left;
    margin-left: 30px;
  }
</style>
